<template>
    <div class="app-container2 zhenduan_baobiao">
      <div class="content_main">
        <div class="search_wrap">
          <div class="search_list">
            <div class="search_item">
              <div class="name">诊断时间段:</div>
              <div class="ipts">
                <el-date-picker
                  class="jk_common_date_picker"
                  v-model="dateValArr"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :append-to-body="false"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="search_item">
              <div class="name">诊断规则:</div>
              <div class="ipts">
                <el-input
                  class="js_common_input"
                  v-model="nameVal"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
            <div class="search_item">
              <div class="name">设备类型:</div>
              <div class="ipts">
                <el-select
                  class="js_common_select"
                  v-model="leixingVal"
                  placeholder="请选择"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in leixingOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- <div class="search_item">
              <div class="name">故障类型:</div>
              <div class="ipts">
                <el-select
                  class="js_common_select"
                  v-model="guzhangVal"
                  placeholder="请选择"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in guzhangOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div> -->
            <div class="search_item">
              <div class="name">设备名称:</div>
              <div class="ipts">
                <el-input
                  class="js_common_input"
                  v-model="nameVal"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="search_btns">
            <el-button class="js_common_btn">查询</el-button>
            <el-button class="js_common_btn">导出</el-button>
          </div>
        </div>
        <div class="table_wrap">
          <el-table
            border
            class="jk_common_table003"
            :data="tableData"
            height="style"
            style="width: 100%; height: 100%"
          >
            <el-table-column label="序号" align="center" width="55">
              <template slot-scope="scop">
                {{ scop.$index + 1 }}
              </template>
            </el-table-column>
  
            <el-table-column
              prop="name"
              label="设备名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="type"
              label="设备类型"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="time"
              label="故障诊断时间"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="guize"
              label="故障诊断规则"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="guzhangname"
              label="故障树名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="jieguo"
              label="故障诊断结果"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <div class="fenye_wrap">
          <el-pagination
            class="js_common_fenyeqi"
            :current-page="1"
            :page-size="10"
            :pager-count="5"
            :append-to-body="false"
            popper-class="js_common_fenyeqi_popper"
            layout="prev, pager, next,sizes, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        dateValArr: [],
        leixingVal: "",
        leixingOptions: [
          {
            value: "选项1",
            label: "通讯服务器",
          },
          {
            value: "选项2",
            label: "历史服务器",
          },
          {
            value: "选项3",
            label: "计算服务器",
          },
          {
            value: "选项4",
            label: "控制站",
          },
          {
            value: "选项5",
            label: "操作员站",
          },
        ],
        guzhangVal: "",
        guzhangOptions: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
        nameVal: "",
        tableData: [
          {
            id: "00001",
            time: "2022-11-28 12:31:18",
            name: "通讯服务器1",
            type: "通讯服务器",
            guize: "服务器故障诊断规则1",
            jieguo: "故障诊断结果1",
            guzhangname: "通信服务01-CS-A失效",
          },
          {
            id: "00002",
            time: "2022-11-11 12:11:12",
            name: "通讯服务器2",
            type: "通讯服务器",
            guize: "服务器故障诊断规则2",
            jieguo: "故障诊断结果2",
            guzhangname: "通信服务01-CS-A失效",
          },
          {
            id: "00003",
            time: "2022-11-11 12:11:12",
            name: "计算服务器1",
            type: "计算服务器",
            guize: "服务器故障诊断规则3",
            jieguo: "故障诊断结果3",
            guzhangname: "通信服务01-CS-A失效",
          },
          {
            id: "00004",
            time: "2022-11-28 12:31:18",
            name: "操作员站1",
            type: "操作员站",
            guize: "操作员站故障诊断规则1",
            jieguo: "故障诊断结果4",
            guzhangname: "通信服务01-CS-A失效",
          },
          {
            id: "00005",
            time: "2022-11-28 12:31:18",
            name: "控制站1",
            type: "控制站",
            guize: "控制站故障诊断规则1",
            jieguo: "故障诊断结果5",
            guzhangname: "通信服务01-CS-A失效",
          },
        ],
      };
    },
  };
  </script>
  <style lang="scss" scoped>
  .zhenduan_baobiao {
    background: linear-gradient(to bottom, #0d1f3c, #163368);
    box-sizing: border-box;
    border: 2px solid #335173;
    .content_main {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .search_wrap {
        flex: 0 0 auto;
        box-sizing: border-box;
        padding: 20px;
        .search_list {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .search_item {
            display: flex;
            align-items: center;
            font-size: 18px;
            color: #ccc;
            margin-left: 50px;
            &:first-child {
              margin-left: 0;
            }
            .name {
              flex: 0 0 auto;
            }
            .ipts {
              margin-left: 10px;
            }
          }
        }
        .search_btns {
          text-align: right;
          .js_common_btn {
            margin-right: 24px;
          }
        }
      }
      .table_wrap {
        width: 100%;
        height: 0;
        flex: 1 1 auto;
      }
      .fenye_wrap {
        flex: 0 0 auto;
        box-sizing: border-box;
        padding: 16px;
      }
    }
  }
  </style>
  